<template>
	<view class="content">


		<!-- 引入头部组件 -->

		<SwiperTabHead :tabBars='tabBars' :tabIndex='tabIndex' @ToChangeTab='myChange'></SwiperTabHead>

		<!-- 首页的列表展示 -->
		<view class="uni-tab-bar" :style="{height:swiperheight+'px'}">
			<swiper class="swiper-box" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newslist" :key="index">
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore(index)">
						
						<!-- uniapp 第一个地方 遍历的时候  尽量不要在view  而是在block 上遍历
						 
						 第二个地方  判断  v-if  指令的使用 我们推荐使用template  上去使用
						 -->

						<template  v-if='items.list.length>0'>
							<block v-for="(item,index1) in items.list " :key='index1'>
								<index-list :item="item" :index="index1"></index-list>
							
							</block>
							
							
							<!-- <LoadMore> 加载更多</LoadMore>		 -->
							<LoadMore :loadText='items.loadtext'> </LoadMore>
						</template>
						
						<!-- 没有数据 -->
						<template v-else>
							<NoThing></NoThing>
						</template>
					</scroll-view>
				</swiper-item>

			</swiper>


		</view>








	</view>
</template>

<script>
	// 第一步引入
	import IndexList from '../../components/index_list.vue'

	// 引入头部导航栏组件

	import SwiperTabHead from '../../components/index/swiper-tab-head.vue'


	import LoadMore from '../../components/common/load-more.vue'
	
	
	import   NoThing  from '../../components/common/no-thing.vue'


import  {reqIndex} from '../../common/api/api.js'
	export default {
		
		//准备发送请求
		onReady() {
			
			reqIndex().then(res=>{
				// alert('reqIndex')
				console.log(res)
			})
		},
		
		
		
		

		components: {
			IndexList,
			SwiperTabHead,
			LoadMore,
			NoThing
		},

		data() {
			return {
				swiperheight: 500, //设置初始化高度


				tabIndex: 0,
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "推荐",
						id: "tuijian"
					},
					{
						name: "体育",
						id: "tiyu"
					},
					{
						name: "热点",
						id: "redian"
					},
					{
						name: "财经",
						id: "caijing"
					},
					{
						name: "娱乐",
						id: "yule"
					},
				],


				newslist: [
					
					{


						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img", // img:图文,video:视频
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 0, //0:没有操作，1:顶,2:踩；
									dingnum: 11,
									cainum: 11,
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", // img:图文,video:视频
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: "20w",
								long: "2:47",
								infonum: {
									index: 1, //0:没有操作，1:顶,2:踩；
									dingnum: 11,
									cainum: 11,
								},
								commentnum: 10,
								sharenum: 10,
							}
						]
					},
					{

						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img", // img:图文,video:视频
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 0, //0:没有操作，1:顶,2:踩；
									dingnum: 11,
									cainum: 11,
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", // img:图文,video:视频
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: "20w",
								long: "2:47",
								infonum: {
									index: 1, //0:没有操作，1:顶,2:踩；
									dingnum: 11,
									cainum: 11,
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "我是标题",
								type: "img", // img:图文,video:视频
								titlepic: "../../static/demo/datapic/11.jpg",
								infonum: {
									index: 0, //0:没有操作，1:顶,2:踩；
									dingnum: 11,
									cainum: 11,
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "我是标题",
								type: "video", // img:图文,video:视频
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: "20w",
								long: "2:47",
								infonum: {
									index: 1, //0:没有操作，1:顶,2:踩；
									dingnum: 11,
									cainum: 11,
								},
								commentnum: 10,
								sharenum: 10,
							}
						]
					},

					{
						loadtext: "上拉加载更多",
						list: []

					},
					{
						loadtext: "上拉加载更多",
						list: []

					}
				]





			}
		},

		onLoad() {

		},
			//点击搜索框实现页面跳转  跳转到搜索页面去 
			
			onNavigationBarSearchInputClicked() {
				// alert('xxxx')
				uni.navigateTo({
					url:'../search/search'
				})
			},
		
		
		
		onNavigationBarButtonTap(e) {
			
			console.log(e) 
			if(e.index==1) { //表示点击的是右边
			uni.navigateTo({
				url:'../add-input/add-input'
			})
				
			}else  if (e.index==0){ //表示点击的是左边 
				
			}
		},
		
		methods: {
			
			

			//切换高亮				
			// changeTab(index) {
			//   this.tabIndex=index
			// },

			//切换高亮 
			myChange(index) {
				this.tabIndex = index
			},

			tabChange(e) {
				console.log(e.detail)
				this.tabIndex = e.detail.current

			},

			loadmore(index) {
				//滚动到底部准备进去加载更多

				//进行逻辑优化判断 
				var loadtext = this.newslist[index].loadtext;

				if (loadtext !== '上拉加载更多') return false

             this.newslist[index].loadtext='正在加载中...'
				// console.log(index)
				var currentListObj = this.newslist[index];

				var currentList = currentListObj.list;

				setTimeout(() => {
					let obj = {
						userpic: "../../static/demo/userpic/12.jpg",
						username: "昵称",
						isguanzhu: false,
						title: "我是标题",
						type: "img", // img:图文,video:视频
						titlepic: "../../static/demo/datapic/11.jpg",
						infonum: {
							index: 0, //0:没有操作，1:顶,2:踩；
							dingnum: 11,
							cainum: 11,
						},
						commentnum: 10,
						sharenum: 10,
					};

					currentList.push(obj)

					this.newslist[index].loadtext = '上拉加载更多'
				}, 1000)


				// this.newslist[index].loadtext='没有更多数据了'

			}



		},
		
		
		
	
		
		
		
	}
</script>

<style scoped>


</style>
